<template>
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="m-b-md">
                                <h2 class="text-success"></h2>
                            </div>

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <dl class="row mb-0">
                                <div class="col-sm-4 text-sm-right"><dt>阶段:</dt> </div>
                                <div class="col-sm-8 text-sm-left"><dd class="mb-1"><span class="label label-primary">TG3.2</span></dd></div>
                            </dl>
                            <dl class="row mb-0">
                                <div class="col-sm-4 text-sm-right"><dt>创建时间:</dt> </div>
                                <div class="col-sm-8 text-sm-left"> <dd class="mb-1">2018-01-01</dd></div>
                            </dl>
                            <dl class="row mb-0">
                                <div class="col-sm-4 text-sm-right"><dt>开始时间:</dt> </div>
                                <div class="col-sm-8 text-sm-left"> <dd class="mb-1">2018-02-02</dd></div>
                            </dl>
                            <dl class="row mb-0">
                                <div class="col-sm-4 text-sm-right"> <dt>结束时间:</dt></div>
                                <div class="col-sm-8 text-sm-left"> <dd class="mb-1"></dd></div>
                            </dl>
                        </div>
                        <div class="col-lg-6" id="cluster_info">
                            <dl class="row mb-0">
                                <div class="col-sm-4 text-sm-right">
                                    <dt>阶段名称:</dt>
                                </div>
                                <div class="col-sm-8 text-sm-left">
                                    <dd class="mb-1">第四阶段(编码实现)</dd>
                                </div>
                            </dl>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <dl class="row mb-0">
                                <div class="col-sm-2 text-sm-right">
                                    <dt>Completed:</dt>
                                </div>
                                <div class="col-sm-10 text-sm-left">
                                    <dd>
                                        <div class="progress m-b-1">
                                            <div style="width: 50%;" class="progress-bar progress-bar-striped progress-bar-animated"></div>
                                        </div>
                                        <small>Project completed in <strong>50%</strong>This item show the project process</small>
                                    </dd>
                                </div>
                            </dl>
                        </div>
                    </div>
                    <div class="row m-t-sm">
                        <div class="col-lg-12">
                        <div class="panel blank-panel">
                        <div class="panel-heading">
                            <div class="panel-options">
                                <ul class="nav nav-tabs">
                                    <li><a class="nav-link active" href="#tab-1" data-toggle="tab">阶段自检通过率</a></li>
                                    <li><a class="nav-link" href="#tab-2" data-toggle="tab">阶段评定结果</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="panel-body">
                        <div class="tab-content">
                        <div class="tab-pane active" id="tab-1">
                            <strong>阶段时间线</strong>
                            <div id="vertical-timeline" class="vertical-container dark-timeline">
                                <div class="vertical-timeline-block">
                                    <div class="vertical-timeline-icon navy-bg">
                                        <i class="fa fa-check"></i>
                                    </div>
                                    <div class="vertical-timeline-content">
                                        <p>TG0 启动阶段(立项/变更阶段)<span class="ml-4 text-success">通过率: 60%</span></p>
                                        <span class="vertical-date small text-muted"> 2:10 pm - 01.06.2018 </span>   
                                    </div>
                                </div>
                                <div class="vertical-timeline-block">
                                    <div class="vertical-timeline-icon navy-bg">
                                        <i class="fa fa-check"></i>
                                    </div>
                                    <div class="vertical-timeline-content">
                                        <p>TG1 第一阶段(计划确定)<span class="ml-4 text-success">通过率: 40%</span></p>
                                        <span class="vertical-date small text-muted"> 4:20 pm - 02.06.2018 </span>
                                    </div>
                                </div>
                                <div class="vertical-timeline-block">
                                    <div class="vertical-timeline-icon navy-bg">
                                        <i class="fa fa-check"></i>
                                    </div>
                                    <div class="vertical-timeline-content">
                                        <p>TG2 第二阶段(需求阶段)<span class="ml-4 text-success">通过率: 47%</span></p>
                                        <span class="vertical-date small text-muted"> 06:10 pm - 03.06.2018 </span>
                                    </div>
                                </div>
                                <div class="vertical-timeline-block">
                                    <div class="vertical-timeline-icon navy-bg">
                                        <i class="fa fa-check"></i>
                                    </div>
                                    <div class="vertical-timeline-content">
                                        <p>TG3.1 第三阶段(设计阶段)<span class="ml-4 text-success">通过率: 80%</span></p>
                                        <span class="vertical-date small text-muted"> 02:50 pm - 04.06.2018 </span>
                                    </div>
                                </div>
                                <div class="vertical-timeline-block">
                                    <div class="vertical-timeline-icon navy-bg">
                                        <i class="fa fa-check"></i>
                                    </div>
                                    <div class="vertical-timeline-content">
                                        <p>TG3.2 第四阶段(编码实现)<span class="ml-4 text-success">通过率: 90%</span></p>
                                        <span class="vertical-date small text-muted"> 2:10 pm - 05.06.2018 </span>
                                    </div>
                                </div>
                                <div class="vertical-timeline-block">
                                    <div class="vertical-timeline-icon gray-bg">
                                        <i class="fa fa-check"></i>
                                    </div>
                                    <div class="vertical-timeline-content">
                                        <p>TG4.1 第四阶段(FC)<span class="ml-4 text-success"> </span></p>
                                        <span class="vertical-date small text-muted"> </span>
                                    </div>
                                </div>
                                <div class="vertical-timeline-block">
                                    <div class="vertical-timeline-icon gray-bg">
                                        <i class="fa fa-check"></i>
                                    </div>
                                    <div class="vertical-timeline-content">
                                        <p>TG4.2 第五阶段(ST实施)<span class="ml-4 text-success"> </span></p>
                                        <span class="vertical-date small text-muted"> </span>
                                    </div>
                                </div>
                                <div class="vertical-timeline-block">
                                    <div class="vertical-timeline-icon gray-bg">
                                        <i class="fa fa-check"></i>
                                    </div>
                                    <div class="vertical-timeline-content">
                                        <p>TG5 第六阶段(交付)<span class="ml-4 text-success"> </span></p>
                                        <span class="vertical-date small text-muted">  </span>
                                    </div>
                                </div>
                                <div class="vertical-timeline-block">
                                    <div class="vertical-timeline-icon gray-bg">
                                        <i class="fa fa-check"></i>
                                    </div>
                                    <div class="vertical-timeline-content">
                                        <p>TG6 收尾阶段(结项阶段)<span class="ml-4 text-success"> </span></p>
                                        <span class="vertical-date small text-muted">  </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="tab-2">

                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>状态</th>
                                    <th>阶段</th>
                                    <th>开始时间</th>
                                    <th>结束时间</th>
                                    <th>阶段评定结果</th>
                                </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <span class="label label-primary"><i class="fa fa-check"></i>Closed</span>
                                        </td>
                                        <td>TG0 启动阶段(立项/变更阶段)</td>
                                        <td>2018-01-01</td>
                                        <td>2018-02-02</td>
                                        <td>
                                            <p class="small">
                                                This is for test
                                            </p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span class="label label-primary"><i class="fa fa-check"></i>Closed</span>
                                        </td>
                                        <td>TG1 第一阶段(计划确定)</td>
                                        <td>2018-02-01</td>
                                        <td>2018-02-22</td>
                                        <td>
                                            <p class="small">
                                                This is for test
                                            </p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span class="label label-primary"><i class="fa fa-check"></i>Closed</span>
                                        </td>
                                        <td>TG2 第二阶段(需求阶段)</td>
                                        <td>2018-03-01</td>
                                        <td>2018-03-22</td>
                                        <td>
                                            <p class="small">
                                                This is for test
                                            </p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span class="label label-primary"><i class="fa fa-check"></i>Closed</span>
                                        </td>
                                        <td>TG3.1 第三阶段(设计阶段)</td>
                                        <td>2018-04-01</td>
                                        <td>2018-04-22</td>
                                        <td>
                                            <p class="small">
                                                This is for test
                                            </p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span class="label label-primary"><i class="fa fa-check"></i>Closed</span>
                                        </td>
                                        <td>TG3.2 第四阶段(编码实现)</td>
                                        <td>2018-05-01</td>
                                        <td>2018-05-22</td>
                                        <td>
                                            <p class="small">
                                                This is for test
                                            </p>
                                        </td>
                                    </tr>
                                    <!-- <tr>
                                        <td>
                                            <span class="label label-primary"><i class="fa fa-check"></i>Closed</span>
                                        </td>
                                        <td>TG4.1 第四阶段(FC)</td>
                                        <td>2018-01-01</td>
                                        <td>2018-02-02</td>
                                        <td>
                                            <p class="small">
                                                This is for test
                                            </p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span class="label label-primary"><i class="fa fa-check"></i>Closed</span>
                                        </td>
                                        <td>TG4.2 第五阶段(ST实施)</td>
                                        <td>2018-01-01</td>
                                        <td>2018-02-02</td>
                                        <td>
                                            <p class="small">
                                                This is for test
                                            </p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span class="label label-primary"><i class="fa fa-check"></i>Closed</span>
                                        </td>
                                        <td>TG5 第六阶段(交付)</td>
                                        <td>2018-01-01</td>
                                        <td>2018-02-02</td>
                                        <td>
                                            <p class="small">
                                                This is for test
                                            </p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span class="label label-primary"><i class="fa fa-check"></i>Closed</span>
                                        </td>
                                        <td>TG6 收尾阶段(结项阶段)</td>
                                        <td>2018-01-01</td>
                                        <td>2018-02-02</td>
                                        <td>
                                            <p class="small">
                                                This is for test
                                            </p>
                                        </td>
                                    </tr>           -->
                                </tbody>
                            </table>
                        </div>
                        </div>
                        </div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'PeriodReview',
    props: {
        
    },
    data() {
        return {

        }
    }
}
</script>
